<!--
@license
Copyright 2020 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<section class="general">
  <h3 class="section-title">General</h3>

  <div class="control-row x-axis-type">
    <div class="control-name" id="x-axis-type-label">Horizontal Axis</div>
    <tb-dropdown
      [value]="xAxisType"
      [options]="XAxisTypeDropdownOptions"
      (selectionChange)="xAxisTypeChanged.emit($event)"
    >
    </tb-dropdown>
  </div>

  <div
    class="control-row scalars-step-selector"
    [title]="!isAxisTypeStep()? 'Only available when Horizontal Axis is set to step': ''"
  >
    <mat-checkbox
      [checked]="isScalarStepSelectorEnabled"
      (change)="stepSelectorToggled.emit()"
      [disabled]="!isAxisTypeStep()"
      >Enable step selection and data table
    </mat-checkbox>
    <span class="indent">(Scalars only)</span>
    <div class="indent range-selection">
      <mat-checkbox
        [checked]="isScalarStepSelectorRangeEnabled"
        (change)="rangeSelectionToggled.emit()"
        [disabled]="!isAxisTypeStep()"
        >Enable Range Selection
      </mat-checkbox>
    </div>
    <div class="control-row linked-time indent">
      <mat-checkbox
        [checked]="isLinkedTimeEnabled"
        (change)="linkedTimeToggled.emit()"
        [disabled]="!isAxisTypeStep()"
        >Link by step {{getLinkedTimeSelectionStartStep()}}
      </mat-checkbox>
    </div>
    <button
      mat-button
      *ngIf="isScalarColumnCustomizationEnabled"
      [ngClass]="{'column-edit-menu-toggle':true, 'toggle-opened': isSlideOutMenuOpen}"
      (click)="onSlideOutToggled.emit()"
    >
      <mat-icon svgIcon="edit_24px"></mat-icon>
      Edit Table Columns
    </button>
  </div>

  <div class="control-row card-width">
    <div class="control-name" id="card-width-label">Card Width</div>
    <div class="slider-row">
      <mat-slider
        aria-labelledby="card-width-label"
        color="primary"
        [max]="MAX_CARD_WIDTH_SLIDER_VALUE"
        [min]="MIN_CARD_WIDTH_SLIDER_VALUE"
        [step]="50"
      >
        <input
          matSliderThumb
          (valueChange)="cardWidthSliderChanged$.emit($event)"
          [value]="cardMinWidth"
        />
      </mat-slider>
      <button
        class="reset-button"
        mat-icon-button
        i18n-aria-label="A button to reset the card width setting"
        aria-label="Reset card width"
        title="Reset card width"
        (click)="cardWidthReset.emit()"
      >
        <mat-icon svgIcon="settings_backup_restore_24px"></mat-icon>
      </button>
    </div>
  </div>

  <div class="control-row saving-pins" *ngIf="globalPinsFeatureEnabled">
    <saving-pins-checkbox
      [isChecked]="isSavingPinsEnabled"
      (onCheckboxToggled)="onEnableSavingPinsToggled.emit(isSavingPinsEnabled)"
    >
    </saving-pins-checkbox>
  </div>
</section>

<section class="scalars">
  <h3 class="section-title">Scalars</h3>

  <div class="control-row scalars-smoothing">
    <div class="control-name" id="scalars-smoothing-label">Smoothing</div>
    <div class="slider-row">
      <mat-slider
        aria-labelledby="scalars-smoothing-label"
        color="primary"
        [max]="MAX_SMOOTHING_SLIDER_VALUE"
        [min]="0"
        [step]="0.01"
        discrete
      >
        <input
          matSliderThumb
          (valueChange)="scalarSmoothingControlChanged$.emit($event)"
          [value]="scalarSmoothing"
        />
      </mat-slider>
      <input
        class="slider-input"
        aria-labelledby="scalars-smoothing-label"
        type="number"
        [max]="MAX_SMOOTHING_VALUE"
        min="0"
        step="0.001"
        [value]="scalarSmoothing"
        (input)="onScalarSmoothingInput($event)"
      />
    </div>
  </div>

  <div class="control-row tooltip-sort">
    <div class="control-name">Tooltip sorting method</div>
    <tb-dropdown
      [value]="tooltipSort"
      [options]="TooltipSortDropdownOptions"
      (selectionChange)="tooltipSortChanged.emit($event)"
    >
    </tb-dropdown>
  </div>

  <div class="control-row scalars-ignore-outliers">
    <mat-checkbox
      [checked]="ignoreOutliers"
      (change)="ignoreOutliersChanged.emit($event.checked)"
      >Ignore outliers in chart scaling</mat-checkbox
    >
  </div>

  <div class="control-row scalars-partition-x">
    <mat-checkbox
      [checked]="scalarPartitionX"
      (change)="scalarPartitionXToggled.emit()"
      >Partition non-monotonic X axis</mat-checkbox
    >
    <mat-icon
      class="info"
      svgIcon="help_outline_24px"
      title="Non-monotonic steps can occur when reusing a logdir with multiple summary writers and overlapping steps. Line charts, without this option enabled, can appear zig zagged. This is common when restarting from a checkpoint.

When enabled, a non-monotonic time series composed of N monotonic pieces will be shown as N monotonic lines."
    ></mat-icon>
  </div>
</section>

<section class="Histograms">
  <h3 class="section-title">Histograms</h3>

  <div class="control-row histogram-mode">
    <div class="control-name">Mode</div>
    <tb-dropdown
      [value]="histogramMode"
      [options]="HistogramModeDropdownOptions"
      (selectionChange)="histogramModeChanged.emit($event)"
    >
    </tb-dropdown>
  </div>
</section>

<section class="image" *ngIf="isImageSupportEnabled">
  <h3 class="section-title">Images</h3>
  <div class="control-row image-brightness">
    <div class="control-name" id="image-brightness-label">Brightness</div>
    <div class="slider-row">
      <mat-slider
        aria-labelledby="image-brightness-label"
        color="primary"
        [max]="2000"
        [min]="0"
        [step]="10"
        [displayWith]="formatMilliToZeroth"
        discrete
      >
        <input
          matSliderThumb
          (valueChange)="imageBrightnessSliderChanged$.emit($event)"
          [value]="imageBrightnessInMilli"
        />
      </mat-slider>
      <button
        class="reset-button"
        mat-icon-button
        i18n-aria-label="A button to reset the image brightness setting"
        aria-label="Reset brightness"
        title="Reset brightness"
        (click)="imageBrightnessReset.emit()"
      >
        <mat-icon svgIcon="settings_backup_restore_24px"></mat-icon>
      </button>
    </div>
  </div>

  <div class="control-row image-contrast">
    <div class="control-name" id="image-constrast-label">Contrast</div>
    <div class="slider-row">
      <mat-slider
        aria-labelledby="image-constrast-label"
        color="primary"
        [max]="5000"
        [min]="0"
        [step]="10"
        [displayWith]="formatMilliToZeroth"
        discrete
      >
        <input
          matSliderThumb
          (valueChange)="imageContrastSliderChanged$.emit($event)"
          [value]="imageContrastInMilli"
        />
      </mat-slider>
      <button
        class="reset-button"
        mat-icon-button
        i18n-aria-label="A button to reset the image contrast setting"
        aria-label="Reset contrast"
        title="Reset contrast"
        (click)="imageContrastReset.emit()"
      >
        <mat-icon svgIcon="settings_backup_restore_24px"></mat-icon>
      </button>
    </div>
  </div>

  <div class="control-row image-show-actual-size">
    <mat-checkbox
      [checked]="imageShowActualSize"
      (change)="imageShowActualSizeChanged.emit($event.checked)"
      >Show actual image size</mat-checkbox
    >
  </div>
</section>
